<template>
  <view class="p-countries">
    <view class="countries-ctnr">
      <view v-for="key in keys" :key="key">
        <text class="title">{{ key }}</text>
        <view
          v-for="(item, index) in countries[key]"
          :key="item.codeKey"
          class="sub-item"
          :class="{ 'first-sub-item': index === 0 }"
          @click="select(item)"
        >
          <view class="info">
            <text class="cname">{{ item.cnKey }}</text>
            <text class="name">{{ item.enKey }}</text>
          </view>
          <text class="itc">+{{ item.codeKey }}</text>
        </view>
      </view>
      <view class="pd-t-5"></view>
    </view>
  </view>
</template>

<script>
import countries from '../../config/countries.json';
import { throttle } from '@/utils';

export default {
  data() {
    return {
      countries: Object.freeze(countries),
      keys: Object.keys(countries),
    };
  },
  onLoad() {
    // #ifdef APP-NVUE
    this.eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
    // #endif
    // #ifndef APP-NVUE
    this.eventChannel = this.getOpenerEventChannel();
    // #endif
  },
  methods: {
    select: throttle(function (country) {
      this.eventChannel.emit('selectCountry', country);
      uni.navigateBack();
    }),
  },
};
</script>

<style lang="scss">
.p-countries {
  // flex: 1;
  // display: flex;
  background-color: #fff;
  .countries-ctnr {
    flex: 1;
    .title {
      padding-left: 40rpx;
      padding-right: 40rpx;
      font-size: 34rpx;
      line-height: 50rpx;
      background-color: #eee;
    }
    .sub-item {
      margin-left: 40rpx;
      margin-right: 40rpx;
      padding-top: 16rpx;
      padding-bottom: 16rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border-top: 1rpx solid #fafafa;
      .info {
        .cname,
        .name {
          font-size: 34rpx;
        }
      }
      .itc {
        font-size: 30rpx;
        color: #666;
      }
    }
  }
}
</style>
